<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'log.list' }">记录</el-breadcrumb-item>
      <el-breadcrumb-item>{{ log?.date }}新进班组计划</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 搜索框 -->
    <div class="search">
      <el-input v-model="searchValue" placeholder="请输入查找的班组编号" clearable :prefix-icon="Search" />
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table :data="tableData" border stripe>
        <el-table-column
          v-for="col in columns"
          :prop="col.prop"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button link type="primary" size="small" v-if="!scope.row.isRecord" @click="addRecord(scope.row)">
                <Plus theme="outline" size="14" fill="#222" />
              </el-button>
              <el-button link type="primary" size="small" v-if="scope.row.isRecord" @click="delRecord(scope.row)">
                <delete theme="outline" size="14" fill="#222" />
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="btn">
      <el-button type="primary" size="default" @click="submitRecord" v-if="!isAllRecord">全部提交</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { Plus, Delete } from '@icon-park/vue-next'
import useLog from '@renderer/composables/useLog'
import useTeam from '@renderer/composables/useTeam'
import useRecord from '@renderer/composables/useRecord'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const { find, log } = useLog()
const { add } = useTeam()
const { add: addr, read, all: allRecord, del: delr, records } = useRecord()

const searchValue = ref('')
const tableData = ref<recordModel[]>([])
const isAllRecord = ref(true)

const columns = [
  { id: 1, label: '分公司', prop: 'proj.company', width: '80' },
  { id: 2, label: '工程简称', prop: 'proj.shortName', width: '100' },
  { id: 3, label: '分包商', prop: 'team.comp.shortName', width: '100' },
  { id: 4, label: '班组', prop: 'team.team', width: '70' },
  { id: 5, label: '管控日期', prop: 'data', width: '' },
]

const open = async () => {
  await find(+route.params.id)
  const data = await read(log.value!)
  await allRecord()
  // 记录是否记录
  for (const d of data) {
    const re = records.value?.find((r: any) => r.data === d.data && r.teamId === d.team.id)
    d.isRecord = re ? true : false
  }
  tableData.value = data
  getIsAllRecord()
}

const getIsAllRecord = () => {
  for (const t of tableData.value) {
    if (!t.isRecord) {
      isAllRecord.value = false
      return
    }
  }
  isAllRecord.value = true
}

const addRecord = async (t: recordModel) => {
  await addr({
    teamId: t.team.id,
    projId: t.proj.id,
    data: t.data,
  })
  ElMessage({
    message: '记录添加成功',
    type: 'success',
  })
  t.isRecord = true
  await allRecord()
  getIsAllRecord()
}

const delRecord = async (t: recordModel) => {
  const r = records.value?.find((re: any) => re.data === t.data && re.teamId === t.team.id)
  await ElMessageBox.confirm(`是否删除${t.team.team}在${r?.data}的记录`, '警告!', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await delr(r?.id!)
      t.isRecord = false
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
  await allRecord()
  getIsAllRecord()
}

// 新增纪录
const submitRecord = async () => {
  for (const t of tableData.value) {
    if (!t.isRecord) {
      await addr({
        teamId: t.team.id,
        projId: t.proj.id,
        data: t.data,
      })
      t.isRecord = true
    }
  }
  await allRecord()
  getIsAllRecord()
}
open()
</script>

<style lang="scss" scoped>
.container {
  @apply px-3;
  .search {
    @apply mt-4 w-full;
  }
  .table {
    @apply mt-3 w-full;
  }
  .btn {
    @apply mt-3 flex justify-end;
  }
}
</style>
